import React from 'react';

// Main组件中通过props接收list
export default function Main({
  list,
  handleChange,
  handleDelById,
  handleCheckAll,
}) {
  // 原理：💥 模拟计算属性原理：setState会导致组件重新渲染，声明的变量会被重新计算
  const isAll = list.length > 0 && list.every((item) => item.done);
  // console.log('isAll----->', isAll);
  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        checked={isAll}
        onChange={handleCheckAll}
        // 可以这么传，如果这么传，父组件接收的是一个布尔值
        // onChange={(e)=>handleCheckAll(e.target.checked)}
      />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => {
          return (
            <li className={item.done ? 'completed' : ''} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.done}
                  // 子组件Main中调用函数，传参id
                  onChange={() => handleChange(item.id)}
                />
                <label>{item.name}</label>
                <button
                  className="destroy"
                  onClick={() => handleDelById(item.id)}
                ></button>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
